<template>
  <div>
    <Card style="min-height: 80vh;">
      <div class="bs-btns">
        <Button type="primary" icon="ios-add" @click="addShow">新增角色</Button>
      </div>

      <Table border :columns="columns" :data="tableData" style="margin-top: 16px">
        <template slot-scope="{ row }" slot="roleName">
          <strong>{{ row.roleName }}</strong>
        </template>
        <template slot-scope="{ row }" slot="remark">
          <span>{{ row.remark }}</span>
        </template>
        <template slot-scope="{ row }" slot="createTime">
          <span>{{ row.createTime | getDateTime }}</span>
        </template>
        <template slot-scope="{ row }" slot="updateTime">
          <span>{{ row.updateTime | getDateTime }}</span>
        </template>
        <template slot-scope="{ row }" slot="createPerson">
          <span>{{ row.createPerson }}</span>
        </template>
        <template slot-scope="{ row }" slot="updatePerson">
          <span>{{ row.updatePerson }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 8px;" @click="edit(row, index)">修 改</Button>
          <Button type="primary" size="small" style="margin-right: 8px;" @click="del(row, index)">删 除</Button>
        </template>
      </Table>
      <div style="text-align: right; margin-top: 16px;">
        <Page
          :total="total"
          show-sizer
          show-elevator
          show-total
          :page-size-opts="pageSizeOpts"
          :page-size="form.pageSize"
          :current="form.pageNo"
          @on-change="pageOnChange"
          @on-page-size-change="pageSizeOnChange" />
      </div>

      <!-- 游戏新增 -->
      <Modal
        v-model="modal"
        :title="title"
        width="640"
        :mask-closable="false"
        :styles="{top: '20px'}"
        @on-cancel="closeModal('formValidate')"
        :footer-hide="true">
        <Form ref="formValidate" :model="formData" :rules="ruleValidate" :label-width="120">
          <FormItem label="角色名称" prop="roleName">
            <Input v-model="formData.roleName" placeholder="角色名称"></Input>
          </FormItem>

          <FormItem label="角色备注" prop="remark">
            <Input v-model="formData.remark" :maxlength="150" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" placeholder="角色备注"></Input>
            <div style="color: #666; text-align: right;">{{ formData.remark ? formData.remark.length : 0 }} / 150</div>
          </FormItem>

          <FormItem label="角色分配" prop="menuIds">
            <CheckboxGroup v-model="formData.menuIds">
              <Row v-for="(val, index) in menuList" :key="index">
                <Checkbox :label="val.id">{{ val.title }}</Checkbox>
                <Row style="padding-left: 30px;" v-if="val.children && val.children.length">
                  <Checkbox v-for="(item, index) in val.children" :key="index" :label="item.id">{{ item.title }}</Checkbox>
                </Row>
              </Row>

            </CheckboxGroup>
          </FormItem>

          <FormItem>
            <Button type="primary" :loading="loading" v-if="title == '新增角色'" @click="handleSubmit('formValidate')">新 增</Button>
            <Button type="primary" :loading="loading" v-if="title == '修改角色'" @click="handleSubmit2('formValidate')">修 改</Button>
            <Button @click="closeModal('formValidate')" style="margin-left: 8px">关 闭</Button>
          </FormItem>
        </Form>
      </Modal>
    </Card>
  </div>
</template>

<script>
import { roleInfoPageQuery, insertRole, updateRole, deleteRoleById } from '@/api/role'
import Format from "@/libs/format.js" // 自定义验证
import { queryListByMenu } from "@/api/menu"
import { menuRefactoringTree } from '@/libs/business_util.js'
export default {
  name: 'role_page',
  data () {
    return {
      modal: false,
      loading: false,
      title: '新增角色',
      pageSizeOpts: [10, 30, 50, 100],
      total: 0,
      form: {
        pageSize: 10,
        pageNo: 1
      },
      columns: [
        {
          title: '角色名称',
          slot: 'roleName',
          tooltip: true,
          align: 'center',
          minWidth: 150
        },
        {
          title: '备注',
          slot: 'remark',
          tooltip: true,
          align: 'center',
          minWidth: 150
        },
        {
          title: '创建时间',
          slot: 'createTime',
          tooltip: true,
          align: 'center',
          minWidth: 135
        },
        {
          title: '更新时间',
          slot: 'updateTime',
          tooltip: true,
          align: 'center',
          minWidth: 135
        },
        {
          title: '创建人',
          slot: 'createPerson',
          tooltip: true,
          align: 'center',
          minWidth: 80
        },
        {
          title: '更新人',
          slot: 'updatePerson',
          tooltip: true,
          align: 'center',
          minWidth: 80
        },
        {
          title: '操作',
          slot: 'action',
          width: 140,
          align: 'center'
        }
      ],
      tableData: [],
      formData: {
        roleName: '',
        menuIds: [],
        remark: '',
        type: ''
      },
      menuList: [],
      ruleValidate: {
        roleName: [
            { required: true, message: '请填写角色名称', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList () {
      let { data } = await roleInfoPageQuery(this.form)
      if (data.code == '200') {
        this.tableData = data.result.rows
        this.total = data.result.totalCount
      }
    },
    // 编辑
    async edit (row, index) {
      this.title = '修改角色'
      let { data } = await queryListByMenu()
      if (data.code == '200') {
        this.menuList = menuRefactoringTree(data.result, '-1')
      } else {
        this.$Message.error(data.error);
      }
      let obj = Object.assign({}, row)
      this.formData.roleName = obj.roleName
      this.formData.remark = obj.remark
      this.formData.type = obj.type
      obj.menuIds ? this.formData.menuIds = obj.menuIds.split(',') : this.formData.menuIds = []
      this.formData.id = obj.id
      this.modal = true
    },
    // 删除
    del (row, index) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>是否确认删除？</p>',
        onOk: async () => {
          let { data } = await deleteRoleById({ id: row.id })
          if (data.code == '200') {
            this.$Message.success('删除成功!');
            this.getList()
          }
          else {
            this.$Message.error(data.error);
          }
        }
      });
    },
    //切换分页
    pageOnChange (val) {
      this.form.pageNo = val
      this.getList()
    },
    //切换条数
    pageSizeOnChange (val) {
      this.form.pageSize = val
      this.getList()
    },
    // 显示新增弹框
    async addShow () {
      this.title = '新增角色'
      let { data } = await queryListByMenu()
      if (data.code == '200') {
        this.menuList = menuRefactoringTree(data.result, '-1')
      } else {
        this.$Message.error(data.error);
      }
      this.modal = true
    },
    // 关闭弹框
    closeModal (name) {
      this.handleReset(name)
      this.formData.menuIds = []
      this.modal = false
    },
    // 新增保存
    handleSubmit (name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          this.loading = true
          let obj = Object.assign({}, this.formData)
          obj.menuIds.length > 0 ? obj.menuIds = obj.menuIds.join(',') : obj.menuIds = ''
          let { data } = await insertRole(obj)
          if (data.code == '200') {
            this.$Message.success('新增成功!');
            setTimeout(() => {
              this.loading = false
              this.closeModal('formValidate')
              this.getList()
            }, 2000)
          } else {
            this.loading = false
            this.$Message.error(data.error);
          }
        } else {
          this.$Message.error('表单信息不完整或不合法!');
        }
      })
    },
    // 修改保存
    handleSubmit2 (name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          this.loading = true
          let obj = Object.assign({}, this.formData)
          obj.menuIds.length > 0 ? obj.menuIds = obj.menuIds.join(',') : obj.menuIds = ''
          let { data } = await updateRole(obj)
          if (data.code == '200') {
            this.$Message.success('修改成功!');
            setTimeout(() => {
              this.loading = false
              this.closeModal('formValidate')
              this.getList()
            }, 2000)
          } else {
            this.loading = false
            this.$Message.error(data.error);
          }
        } else {
          this.$Message.error('表单信息不完整或不合法!');
        }
      })
    },
    // 重置表单
    handleReset (name) {
      this.$refs[name].resetFields();
    }
  }
}
</script>

<style lang="less">
.bs-btns {
  text-align: right;
}
</style>
